<template>
  <div>
    <div id="panel"></div>
    <div id="container"></div>
  </div>
</template>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d4f1da6e2c3b0fc832cbac2ac2e60499&plugin=AMap.DistrictSearch,AMap.Geocoder,AMap.DistrictLayer,AMap.AutoComplete,AMap.PlaceSearch"></script>
<script>
  import AMapLoader from '@amap/amap-jsapi-loader';
  export default {
    name: "map",
    props: {
      carData: {
        type: Array,
        default: () => []
      },
    },
    watch: {
    carData: {
      deep: true,
      handler(val) {
        this.initMap()
      }
    }
  },
    data() {
      return {
        map: null //初始化 map 对象
      }
    },
    methods: {
      initMap() {
        let center = [118.338108,32.251765];
        // if(this.carData.length>0){
        //   center = [Number(this.carData[0].longitude),Number(this.carData[0].latitude)]
        // }
        window._AMapSecurityConfig = {
            securityJsCode:'1efca65538d588450f3c3d34552d411e',
        }
        AMapLoader.load({
          key: "d4f1da6e2c3b0fc832cbac2ac2e60499", //此处填入我们注册账号后获取的Key
          version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [
               'AMap.Autocomplete'
          ], //需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
          this.map = new AMap.Map("container", { //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 15, //初始化地图级别
            center: center, //初始化地图中心点位置
            // mapStyle: "amap://styles/dark"
          });
        //  this.map.setMapStyle( "amap://styles/darkblue")
         const fun = [
          'AMap.MapType',
          'AMap.Scale',
          'AMap.OverView',
          'AMap.CustomLayer',
          'AMap.ToolBar',
          'AMap.ControlBar',//罗盘
          'AMap.HawkEye',//罗盘
         ]
         this.map.plugin(fun,()=>{
          console.log('aaaa')
           this.map.addControl( new AMap.MapType())
           this.map.addControl( new AMap.Scale())
           this.map.addControl( new AMap.ToolBar())
           this.map.addControl( new AMap.ControlBar())
          //  this.map.addControl( new AMap.HawkEye())

          //  this.map.addControl( new AMap.CustomLayer())
         })
        //  this.map.clearMap()// 清除所有覆盖物（点标志）

         this.setMarket();

        //  this.handleClick()//地图选点
        //     AMap.service(["AMap.PlaceSearch"], function() {
        //     var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
        //         pageSize: 5, // 单页显示结果条数
        //         pageIndex: 1, // 页码
        //         city: "010", // 兴趣点城市
        //         citylimit: true,  //是否强制限制在设置的城市内搜索
        //         map: map, // 展现结果的地图实例
        //         panel: "panel", // 结果列表将在此容器中进行展示。
        //         autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        //     });
        //     //关键字查询
        //     placeSearch.search('方恒国际中心｜大恒科技大厦');
        // });
        }).catch(e => {
          console.log(e);
        })
      },
        //自定义信息窗体
        showInfoWindow(marker,data){
          console.log('showwwwww')
          let infoWindow = new AMap.InfoWindow({
            isCustom: true, //是否自定义信息窗体
            content:  `<div class='mapInfoBox'><p><b>名称：</b>${data.name}</p>
                        <p><b>车牌号：</b>${data.plateNum}</p>
                        <p><b>备注：</b>${data.remark}</p>
                        <p><b>状态：</b>${data.status == 1 ?"在线":"离线"}</p></div>`,
            closeWhenClickMap: true,
            zIndex: 999,
            offset: new AMap.Pixel(100, 100)
          });
          infoWindow.open(this.map, marker.getPosition());
        },
         //点击地图获取地理位置
        handleClick(){
            this.map.on('click', (e) => {
            let lng = e.lnglat.lng
            let lat = e.lnglat.lat
            console.log(lng,'lng')
            console.log(lat,'lat')
            let marker = new AMap.Marker({
              position: new AMap.LngLat(lng, lat),
              offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
            })
            this.map.clearMap()// 清除所有覆盖物（点标志）
            this.map.add(marker)// 添加点标志
            let lnglat = [lng, lat]
            let that = this
            // that.geocoder.getAddress(lnglat, function (status, result) {
            //   if (status === 'complete' && result.regeocode) {
            //     that.address = result.regeocode.formattedAddress;
            // that.showInfoWindow(marker);//自定义信息窗体
            //   let thisPosition = {
            //     address: that.address,
            //     lng: lng,
            //     lat: lat
            //     };
            //     that.$emit("select",thisPosition) //返回给父组件
            //   } else {
            //     that.$message.error('根据经纬度查询地址失败')
            //   }
            // })
          })
        },
        setMarket(){
           this.carData.map((item)=>{
              let url = require('@/assets/images/car3.png')
              if(item.status == 1){
                url = require('@/assets/images/car1.png')
              }
              //点标记显示内容
              const markerContent = `<div ref='btn' class="custom-content-marker">
              <img src="${url}" style='width:160px;height:40px'>
              </div>`
              let marker = new AMap.Marker({
                position: new AMap.LngLat(Number(item.longitude), Number(item.latitude)),
                content: markerContent, //将 html 传给 content
                offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
              })
              // marker.on('click', this.showInfoWindow(marker,item));

              this.map.add(marker)
              this.showInfoWindow(marker,item)//展示信息窗体
            //给marker增加click事件
             marker.on('click', () => { //使用箭头函数，this才能指向包含showInfoWindow的vue组件
              console.log('点击了点位'); // 确认点击事件生效
              this.showInfoWindow(marker,item); //点击标记展示窗体
            });

           })

        },
    },
    mounted() {
      //DOM初始化完成进行地图初始化
      this.initMap();
    },
    destroyed(){
      // 销毁地图，并清空地图容器.该方法执行后，地图对象被注销，内存释放，地图容器被清空。
      this.map.destroy( );
    }
  }
</script>

<style>
  #container {
    width: 100%;
    height: 485px;

  }
  .amap-ctrl-list-layer{
    color: #000;
  }
  #panel {
            position: absolute;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
        .mapInfoBox{
          background: #fff;
          border-radius: 4px;
          padding: 10px;
          color: #000;
        }
</style>
